<template>
    <div>用户列表: {{ userList }}</div>
    <div><el-input v-model="userId" placeholder="" class="w-50"></el-input><el-button class="w-20 ml-10" type="primary" @click="getUser">submit</el-button>
        <el-text class="mx-1">{{textarea}}</el-text>
    </div>
    <el-input
    v-model="textarea"
    style="width: 240px"
    :rows="2"
    type="textarea"
    placeholder="Please input"
  />
  </template>
  
  <script lang="js">
  import { defineComponent, onMounted, ref } from 'vue'
  import { reqUserList, reqUserDetail } from '../api/user'
  
  export default defineComponent({
  setup() {
    const userList = ref([])
    const userId = ref('')
    const textarea = ref([])

    const getList = () => {
    //   reqUserList().then(res => {
    //     userList.value = res
    //     console.log(res)
    //   })
    }

    const getUser = () => {
  reqUserDetail(userId.value).then(res => {
    // 假设响应对象的结构是 { data: userDetails }
    // 你需要根据实际返回的数据结构进行调整
    textarea.value = res
    console.log(userId.value, res);
  }).catch(error => {
    console.error('获取用户详情失败:', error);
    textarea.value = '获取用户详情失败'; // 提供错误反馈
  });
}


    // 组件挂载后获取用户列表
    onMounted(() => {
      getList()
    })

    // 从 setup 函数返回所有想在模板中使用的响应式数据
    return {
      userList,
      userId,      // 确保返回这个变量
      textarea,    // 和这个变量
      getUser,     // 同时，如果您希望在模板中调用 getUser 方法，也需要返回它
    }
  },
})

  </script>
  